function manageVocView (e) {
	var $tr = $(this).parents("tr");
	var $table = $tr.parents('table');
	var rowId = $(".voc-list-col-0", $tr).text();
	$table.addClass ('manage-voc-table-disabled');
	$tr.after ("<tr><td class='manage-voc-view-expanded-actions' colspan='3'>" +
		"<button class='close'>Close</button></td></tr>");
	// Name field
	var $nameTd = $(".voc-list-col-1", $tr); 
	var name = $nameTd.text();
	// Convert from-to language to select boxes
	var $langTd = $(".voc-list-col-2", $tr);
	var langText = $langTd.text();
	var minIdx = langText.indexOf ("-");
	var fromLang = langText.substr(0, minIdx).trim();
	var toLang = langText.substr(minIdx+1).trim();
	// Convert tags in to edit field
	var $tagsTd = $(".voc-list-col-3", $tr); 
	var tags = $tagsTd.text();
	$table.addClass ("table-view");
	$tr.addClass ("row-view");
	// Words
	var words = "Please wait loading...";
	$tr.after ("<tr><td class='manage-voc-view-expanded' colspan='3'>"+
			"<table><tr><td>Name:</td><td><span class='input-text'>" + name + "</span></td></tr>"+
			"<tr><td>From:</td><td><span class='input-text'>" + fromLang + "</span></td></tr>" +
			"<tr><td>To:</td><td><span class='input-text'>" + toLang + "</span></td></tr>" +
			"<tr><td>Tags:</td><td><span class='input-text'>" + tags + " </span></td></tr>" +
			"<tr><td>Words:</td><td><span class='input-text view-words'" + words + " </span></td></tr></table></td></tr>");
	var $editForm = $(".manage-voc-view-expanded", $table);
	$.get("/learnlang/vocabularyPage/vocList/"+rowId,
		function(data) {
			$(".view-words", $editForm).text(data.wordsList);
	});
	$(".close").click (function() {
		var $this_tr = $(this).parents("tr");
		var table = $this_tr.parents('table');
		var $prevTr = $this_tr.prev();
		table.removeClass ('manage-voc-table-disabled');
		$this_tr.remove ();
		$prevTr.remove();
		$table.removeClass ("table-view");
		$tr.removeClass ("row-view");
	});
} // manageVocView

function manageVocEdit (e) {
	var $tr = $(this).parents("tr");
	var $table = $tr.parents('table');
	var rowId = $(".voc-list-col-0", $tr).text();
	$table.addClass ('manage-voc-table-disabled');
	$tr.after ("<tr><td class='manage-voc-edit-expanded-actions' colspan='3'>" +
		"<button class='done'>Done</button>" +
		"<button class='cancel'>Cancel</button></td></tr>");
	// Convert name in to edit field
	var $nameTd = $(".voc-list-col-1", $tr); 
	var name = $nameTd.text();
	// Convert from-to language to select boxes
	var $langTd = $(".voc-list-col-2", $tr);
	var langText = $langTd.text();
	var minIdx = langText.indexOf ("-");
	var fromLang = langText.substr(0, minIdx).trim();
	var toLang = langText.substr(minIdx+1).trim();
	// Convert tags in to edit field
	var $tagsTd = $(".voc-list-col-3", $tr); 
	var tags = $tagsTd.text();
	$table.addClass ("table-edit");
	$tr.addClass ("row-edit");
	// Words
	var words = "Please wait loading...";
	$tr.after ("<tr><td class='manage-voc-edit-expanded' colspan='3'>"+
			"<table><tr><td>Name:</td><td><input class='edit-name' type='text' value='" + name + "'></td></tr>"+
			"<tr><td>From:</td><td><select class='edit-from-lang'>" + html_option_languages_list + "</select></td></tr>" +
			"<tr><td>To:</td><td><select class='edit-to-lang'>" + html_option_languages_list + "</select></td></tr>" +
			"<tr><td>Tags:</td><td><textarea class='edit-tags'>" + tags + "</textarea></td></tr>" +
			"<tr><td>Words:</td><td><textarea class='edit-words'>" + words + "</textarea></td></tr></table></td></tr>");
	var $editForm = $(".manage-voc-edit-expanded", $table);
	$.get("/learnlang/vocabularyPage/vocList/"+rowId,
		function(data) {
			$(".edit-words", $editForm).val(data.wordsList);
	});
	$(".edit-from-lang",$editForm).val (langMap[fromLang]);
	$(".edit-to-lang",$editForm).val (langMap[toLang]);
	$(".cancel").click (function() {
		var $this_tr = $(this).parents("tr");
		var table = $this_tr.parents('table');
		var $prevTr = $this_tr.prev();
		table.removeClass ('manage-voc-table-disabled');
		$this_tr.remove ();
		$prevTr.remove();
		$nameTd.html("<div><span>" + name + "</span></div>");
		$langTd.html(fromLang + "-" + toLang);
		$tagsTd.html("<div><span>" + tags + "</span></div>");
		$table.removeClass ("table-edit");
		$tr.removeClass ("row-edit");
	});
	$(".done").click (function() {
		var $this_tr = $(this).parents("tr");
		var table = $this_tr.parents('table');
		var $prevTr = $this_tr.prev();
		table.removeClass ('manage-voc-table-disabled');
		$this_tr.remove ();
		$prevTr.remove();
		// put edited name back
		var name = $(".edit-name", $editForm).val();
		$nameTd.html("<div><span>" + name + "</span></div>");
		// put changed langs back
		var fromLang = $("option:selected", $(".edit-from-lang", $editForm)).text();
		var toLang = $("option:selected", $(".edit-to-lang", $editForm)).text();
		$langTd.html(fromLang + "-" + toLang);
		// put edited tags back
		var tags = $(".edit-tags", $editForm).val();
		var words = $(".edit-words", $editForm).val();
		$tagsTd.html("<div><span>" + tags + "</span></div>");
		$table.removeClass ("table-edit");
		$tr.removeClass ("row-edit");
		$.ajax ({
			url: "/learnlang/vocabularyPage/vocList/"+rowId,
			type: "PUT",
			headers: { 
		        'Accept': '*/*',
		        'Content-Type': 'application/json' 
		    },
		    dataType: 'json',
			data: JSON.stringify ({
				name: name,
				userId: 'not-used',
				tags: tags,
				wordsList: words,
				fromLangText: fromLang, 
				fromLang:langMap[fromLang],
				toLangText: toLang, 
				toLang:langMap[toLang]
			})
		});
	});
} // manageVocEdit

function manageVocDelete (e) {
	var name = $(".voc-list-col-1", $(this).parents("tr")).text();
	if (confirm ("Delete vocabulary list <" + name + ">?")) {
		$(this).parents('form').submit();
	} // if
} // manageVocDelete

function submitManageVocListSearch () {
	if ($(".manage-voc-pagination").length) {
		document.forms.searchManageList.action += '?pageSize=10';
		document.forms.searchManageList.action += '&pageIdx=' + $(".manage-voc-pagination").jqPagination('option','current_page');
	} // if
	document.forms.searchManageList.submit();
} // submitManageVocListSearch

$(document).ready(function() {
	$('.manage-voc-view').click (manageVocView);
	$('.manage-voc-edit').click (manageVocEdit);
	$('.manage-voc-delete').click (manageVocDelete);
});
